<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html>
<html>
    <head>
       <sj:head />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Booking for conference</title>
        <script src="js/jquery.cookie.js"></script>
        <script src="js/coms.js"></script>

        <script type="text/javascript">
            function fetchValue(conferenceId) {                
                $.getJSON("conferenceData.action" ,
                {
                    conferenceId: conferenceId
                },
                function(json) {
                    itemsHtml = "<table cellpadding='6'>";                    
                    itemsHtml += "<tr>";
                    itemsHtml += "<td colspan='6'><h3>" + json.name + "</h3></td></tr>";
                    itemsHtml += "<tr><td colspan='6'>" + json.detail + "</td></tr>";
                    itemsHtml += "<tr><td>Cost</td><td>:</td><td>" + json.cost + "</td><td colspan='3'></td></tr>";                    
                    itemsHtml += "<tr><td>Venue</td><td>:</td><td>" + json.location + "</td><td colspan='3'></td></tr>";                    
                    itemsHtml += "<tr><td>Start Date</td><td>:</td><td>" + json.conferenceStartDate + "</td>";
                    itemsHtml += "<td>End Date</td><td>:</td><td>" + json.conferenceEndDate + "</td></tr>";
                    itemsHtml += "</tr>";
                    
                    itemsHtml += "</table>";
                    $('#conferenceDetail').html(itemsHtml);
                }
            );
                return false;
            }
        </script>
    </head>
    <body>
        <s:include value="/jsp/header.jsp">
            <s:param name="user" value="#session.user.username" />
        </s:include>
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span3">
                   <s:action name="selectMenu" executeResult="true"/>
                </div>
                <div class="span9">
                    <div class="hero-unit">
                        
                        <s:form id="formSelectTwo" action="confirmConferenceBooking">
                            <table  align="center" cellpadding="5">
                                <tr>
                                    <td colspan="3"><h2>Participate in Conference</h2></td>
                                </tr>
                                <tr>
                                    <td>Select Conference</td>
                                    <td>:</td>
                                    <td>
                                        <s:select name="conferenceId" list="conferenceList"  headerKey="-1" headerValue = "[--Select Conference--]" listKey="id" listValue="name" onchange="fetchValue(this.value)"/></td>
                                </tr>
                                <tr>
                                    <td colspan="3" height="200" width="670"><div id="conferenceDetail">Select a conference to see its details</div></td>
                                </tr>
                                <tr>
                                    <td align="center" colspan="3"><s:submit value="Confirm Booking"/></td>
                                </tr>

                            </table>
                        </s:form>
                    </div>
                    <div class="row-fluid">
                    </div>
                </div>
            </div>
        </div>
        <s:include value="/jsp/footer.jsp"/>
    </body>
</html>
